import React, { PureComponent, Fragment } from 'react';
import moment from 'moment';
import { connect } from 'dva';
import {
  Button,
  Tag,
  Modal,
  Form,
  message,
  Table,
  Radio,
  Input,
  Icon,
  Drawer,
  Row,
  Col,
  Switch,
  Progress, DatePicker, Select,
} from 'antd';
import MyPagination from '@/components/MyPagination';
import Loading from '@/components/Loading';

import find from 'lodash/find';
import debounce from 'lodash/debounce';
import { ellipsis, afterCloseModal, DescriptionItem } from '@/utils/utils';
import { routerRedux } from 'dva/router';
import party from './../../images/party.png'
import BuildModalTitle from '@/components/BuildModalTitle';
import ReactDataGrid from 'react-data-grid';
import AddOrEditUser from './addOrEditUser';
import ReactEcharts from 'echarts-for-react';
const { MonthPicker, RangePicker } = DatePicker;
const FormItem = Form.Item;
const { confirm } = Modal;
const { Option } = Select;

const RadioButton = Radio.Button;

const RadioGroup = Radio.Group;

@connect(({ party_report, loading, global }) => ({
  party_report,
  global,
  loading: loading.models.party_report,
}))
@Form.create()
class BasicList extends PureComponent {
  constructor(props) {
    super(props);
    this.permissions = JSON.parse(sessionStorage.getItem('permissions'));
    this.state = {
      showAddBtn: find(this.permissions, { name: 'device_add_and_edit' }),
      showdelBtn: find(this.permissions, { name: 'device_delete' }),
      showPasswordBtn: find(this.permissions, { name: 'user_default_password_edit' }),
      user_password_reset: find(this.permissions, { name: 'user_password_reset' }),
      visible: false,
      done: false,
      page: 1,
      per_page: 30,
      username: '',
      editRecord: {},
      selectedRowKeys: [],
    };
  }


  componentDidMount() {

    const { dispatch } = this.props;
    const {
      party_report: { pageLoaded, scrollData },
    } = this.props;
    console.log('pageLoaded', pageLoaded);
    if (pageLoaded) {

    } else {
      const {
        party_report: { searchParams },
      } = this.props;
      console.log('searchParams', searchParams);
      dispatch({
        type: 'party_report/fetch',
        payload: searchParams,
        callback: () => {
          const { dispatch } = this.props;
          dispatch({
            type: 'party_report/changeLoaded',
          });
          dispatch({
            type: 'party_report/changeTableY',
          });
        },
      });

    }
    window.addEventListener('resize', this.resize);
  }

  scroll = (e) => {
    console.log('scroll');
    const { dispatch } = this.props;
    dispatch({
      type: 'party_report/changeScroll',
      payload: {
        x: e.target.scrollLeft,
        y: e.target.scrollTop,
      },
    });
  };

  resize = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'party_report/changeTableY',
    });
  };
  findChildFunc = (cb) => {
    this.file = cb;
  };

  componentWillUnmount() {
    console.log('componentWillUnmount');
    window.removeEventListener('resize', this.resize);
  }

  handleSearch = (values, cb) => {
    console.log('handleSearch', values);
    const that = this;
    const { dispatch } = this.props;
    dispatch({
      type: 'party_report/fetch',
      payload: {
        ...values,
      },
      callback() {
        console.log('handleSearch callback');
        if (cb) cb();
      },
    });
  };

  renderSimpleForm() {
    const {
      form: { getFieldDecorator },
      party_report: { searchParams },
    } = this.props;
    const monthFormat = 'YYYY/MM';
    return (
      <Form layout="inline" className="search-form">


        <FormItem label="查询年份">
          {getFieldDecorator('year', {
            initialValue: searchParams.year,
          })(<Select allowClear={false} style={{width:100}}>
            <Option value={'2020'}>2020</Option>
            <Option value={'2021'}>2021</Option>
          </Select>)}
        </FormItem>
        <FormItem>
          <Button
            type="primary"
            icon='search'
            onClick={() => {
              const { form } = this.props;
              form.validateFields((err, fieldsValue) => {
                if (err) return;

                this.handleSearch({
                  page: 1,
                  per_page: searchParams.per_page,
                  ...fieldsValue,
                });

              });
            }}
          >
            查询
          </Button>
          <Button style={{ marginLeft: 8 }} icon='redo' onClick={this.handleFormReset}>
            重置
          </Button>
        </FormItem>

      </Form>
    );
  }


  handleFormReset = () => {
    const { form } = this.props;
    form.resetFields();
    this.handleSearch({
      username: '',
      page: 1,
      per_page: 30,
    });
  };

  getOption=()=>{
   let option = {
      xAxis: {
        type: 'category',
        data: ['2021-01', '2021-02', '2021-03', '2021-04', '2021-05', '2021-06', '2021-07', '2021-08', '2021-09', '2021-10'
          , '2021-11', '2021-12'],
        splitLine:{
          show:false
        }
      },
     legend: {
       data: ['已缴党费人数','未缴党费人数','已缴党费金额'],
       x: 'center',
       top: '15',
       textStyle: {
         color: '#fff',
       },
     },
     tooltip: {
       trigger: 'axis',
       axisPointer: {            // 坐标轴指示器，坐标轴触发有效
         type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
       },
     },
     toolbox: {
       right: '1%',
       iconStyle:{
         color:'#04ae00'
       },
       emphasis: {
         iconStyle: {
           color: "rgb(255,255,255)"
         }
       },
       feature: {
         saveAsImage: {},
         dataView: {readOnly: true},
       }
     },
     grid: {
       top: '9%',
       left: '4%',
       right: '4%',
       bottom: '5%',
     },
      yAxis: [{
        type: 'value',
        "axisLine": {
          lineStyle: {
            color: '#edfaff'
          }
        },
      },{
        type: 'value',
        name: '已缴党费金额(折线图)',
        axisLabel: {
          formatter: '{value}(元)',
        },
        splitLine: {
          show: false
        }
      }],
      series: [{
        name: '已缴党费人数',
        data: [20, 20, 20, 20, 20, 19, 8,'-','-','-','-','-'],
        type: 'bar',
        stack: '总量',
        barWidth:'60%',
        label: {
          normal: {
            show: true,
            position: 'inside',
            fontSize:14,
          },
        },
        itemStyle: {
          normal: {
            color: '#04ae00',
          },
        },
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)'
        }
      },{
        name: '未缴党费人数',
        data: [0, 0, 0, 0, 0, 1, 12,'-','-','-','-','-'],
        type: 'bar',
        stack: '总量',
        barWidth:'50%',
        label: {
          normal: {
            show: true,
            position: 'inside',
            fontSize:14,
          },
        },
        itemStyle: {
          normal: {
            color: '#cc1700',
          },
        },
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)'
        }
      },     {
        name: '已缴党费金额',
        type: 'line',
        yAxisIndex: 1,
        symbolSize:10,
        symbol:'emptyCircle',
        data: [1200, 2100, 2100, 3000, 3600, 2500, 1200,'-','-','-','-','-'],
        smooth: true,
        lineStyle:{
          width: 5,
        },
        itemStyle:{
          normal: {
            color: '#ffda00',
          }
        },
        label: {
          normal: {
            show: true,
            position: 'right',
            fontSize:14,
            fontWeight:'bold'
          },
        },
      },]
    };
   return option
  }
  render() {
    const that = this;
    const {
      party_report: { data, loading, tableY, meta, searchParams, selectedRowKeys },
      global: { gridTableW },
    } = this.props;


    return <div className="custom-card">
      <div className="table-title"><span className={'title-item'}>党费统计</span>
      </div>
      <div className="table-page">
        <div className="table-condition">{this.renderSimpleForm()}</div>
        <div className={'table-data-content'}>
          <ReactEcharts
            option={this.getOption()}
            style={{ height: tableY+'px', width: '100%' }}
            theme='my_theme'
            //onChartReady={this.onChartReadyCallback}
            //onEvents={EventsDict}
          />

        </div>


      </div>
      <Modal
        title={<BuildModalTitle visible={this.state.addModal} modalClass="addModal" title="发布工单"/>}
        className="addModal"
        visible={this.state.addModal}
        centered
        onCancel={() => {
          this.setState({ addModal: false });
        }}
        onOk={this.handleAdd}
      >
        <AddOrEditUser
          wrappedComponentRef={(inst) => this.AddUser = inst}/>

      </Modal>
    </div>;
  }
}

export default BasicList;
